<template>
  <div>
    <!--过滤条件-->
    <el-form size="mini" label-width="80px">
      <el-row :gutter="30">
        <el-col style="width: 300px;">
          <el-form-item label="订单日期">
            <el-date-picker v-model="filterData.daterange" type="daterange" align="right" unlink-panels
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="订单渠道">
            <el-select v-model="filterData.platform" style="width: 100%;" placeholder="订单渠道" clearable>
              <el-option v-for="(item,index) in platforms" :label="item.label" :key="item.index" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="外部单号">
            <el-input placeholder="外部单号" v-model="filterData.ordercode" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="商品名称">
            <el-input v-model="filterData.good" placeholder="商品名称" clearable></el-input>
          </el-form-item>
        </el-col>
         <el-col style="width: 260px;">
          <el-form-item label="收货信息">
            <el-input placeholder="收货信息:收货人,收货电话,收货地址" v-model="filterData.buyerinfo" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width:260px">
          <el-form-item label="客户单位">
            <el-input placeholder="客户企业名称" v-model="filterData.clientname" clearable></el-input>
          </el-form-item>
        </el-col>


        <el-col style="width:240px">
          <el-form-item label="发票状态">
            <el-select v-model="filterData.supticket_status" placeholder="发票状态" style="width: 100%;" clearable>
              <el-option label="待开具" value="0"></el-option>
              <el-option label="已核销" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col style="width:200px">
          <el-form-item label="销项票号">
            <el-input placeholder="销项票号" v-model="filterData.supticketid" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width:120px">
          <el-form-item>
            <el-select v-model="filterData.income_status" placeholder="收款状态" style="width: 100%;" clearable>
              <el-option label="待收款" value="1"></el-option>
              <el-option label="已收款" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col style="width:260px">
          <el-form-item>
            <el-input placeholder="订单备注" v-model="filterData.ordermemo" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="" label-width="25px">
            <el-checkbox v-model="filterData.containcancel">包含已取消订单</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col style="width:120px">
          <el-form-item label-width="10px">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery" style="width: 100%;"> 查询
            </el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div style="display: flex;">

    <div style="text-align: right;margin:5px 0px 5px; display: flex;justify-content: flex-end;">
      <el-button type="primary" size="mini" icon="el-icon-download" :disabled="tableData.length<=0"
        @click="handleExport()">导出订单</el-button>
      <el-popover width="240" trigger="click">
        <el-checkbox-group v-model="columnSelected">
          <el-row :gutter="10">
            <el-col v-for="item in columnHeaders" :key="item.title" :span="12">
              <el-checkbox :label="item.title"></el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
        <el-button slot="reference" icon="el-icon-menu" size="mini" type="primary"
          style="margin-left: 2px;"></el-button>
      </el-popover>
    </div>
    </div>
    <!--订单列表 -->
    <div class="table-wraper">
      <el-table :data="tableData" ref="tableData" border height="100%" :header-row-style="{height:'30px'}"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#363636',border:'1px solid #e8e8e8'}"
        @selection-change="handleSelection" @select-all="handleSelection">
        <el-table-column prop="ouid" label="id" v-if="false"></el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left"></el-table-column>
        <el-table-column type="selection" width="45" align="center" fixed="left"></el-table-column>
        <el-table-column type="expand" label="详情">
          <template v-slot="scope">
            <div style="margin-left: 95px; width: 1400px;">
              <el-table :data="scope.row.goods" border>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="sn" label="商品编码" align="center" width="150px" show-overflow-tooltip></el-table-column>
                <el-table-column prop="platform" label="下单渠道" align="center" width="150px" v-if="false"></el-table-column>
                <el-table-column prop="title" label="商品名称" align="left"></el-table-column>
                <el-table-column prop="model" label="规格型号" align="left" width="100px"></el-table-column>
                <el-table-column prop="unit" label="单位" width="80px" align="center" ></el-table-column>
                <el-table-column prop="count" label="数量" width="80px" align="center" ></el-table-column>
                <el-table-column prop="price" label="单价" align="center" width="120px">
                  <template v-slot="scope">
                    {{format2Number(scope.row.price,2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="total" label="总价" align="center" width="120px">
                  <template v-slot="scope">
                    {{format2Number(scope.row.total,2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="supprice" label="折后单价" align="center" width="120px">
                </el-table-column>
                <el-table-column prop="suptotal" label="折后总价" align="center" width="120px">
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" v-if="columnHeaders[11].show" label="状态" align="center" width="70">
          <template v-slot="scope">
            <div style="cursor: pointer;" @click="handleDispatch(scope.$index,scope.row)">
              <span v-if="scope.row.status==0" style="color:#55aa00">正常</span>
              <span v-if="scope.row.status==1" style="color: #8f8f8f">已取消</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderdate" v-if="columnHeaders[1].show" label="下单时间" width="140">
          <template v-slot="scope">
            <span v-if="scope.row.status==1" style="color: #8f8f8f"><del>{{scope.row.orderdate}}</del></span>
            <span v-if="scope.row.status!=1">{{scope.row.orderdate}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内部单号" prop="ouid" width="110px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ordercode" v-if="columnHeaders[0].show" label="外部单号" align="center" width="150" show-overflow-tooltip>
          <template v-slot="scope">
            <span v-if="scope.row.status==1" style="color: #8f8f8f"><del>{{scope.row.ordercode}}</del></span>
            <span v-if="scope.row.status!=1">{{scope.row.ordercode}}</span>
          </template>
        </el-table-column>


        <el-table-column prop="type" v-if="false" label="类型" width="50" align="center">
          <template v-slot="scope">
            <span title="京东平台订单" v-if="scope.row.platform.indexOf('京东')!=-1"
              style="cursor:default; background-color: #ff0000;color:#FFFFFF; padding: 2px;border-radius: 3px;">JD</span>
            <span title="政采云平台订单" v-if="scope.row.platform.indexOf('政采云')!=-1"
              style="cursor:default; background-color: #197aff;color:#FFFFFF;padding: 4px;border-radius: 3px;">采</span>
            <span title="军队自行采购平台订单" v-if="scope.row.platform.indexOf('自采')!=-1"
                style="cursor:default; background-color: #55aa00;color:#FFFFFF;padding: 4px;border-radius: 3px;">军</span>
          </template>
        </el-table-column>
        <el-table-column prop="platform" v-if="columnHeaders[3].show" label="订单渠道" align="center" width="140"
          show-overflow-tooltip>
          <template v-slot="scope">
            <span v-if="scope.row.status==3" style="color: #8f8f8f"><del>{{scope.row.platform}}</del></span>
            <span v-if="scope.row.status!=3">{{scope.row.platform}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" v-if="columnHeaders[4].show" label="订单总额" align="center" width="90">
          <template v-slot="scope">
            <span v-if="scope.row.status==1"
              style="color: #8f8f8f"><del>{{format2Number(scope.row.sum_order,4)}}</del></span>
            <span v-if="scope.row.status!=1">{{format2Number(scope.row.sum_order,4)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ptamount" v-if="columnHeaders[5].show" label="应收总额" align="center" width="90">
          <template v-slot="scope">
            <span v-if="scope.row.status==1"
              style="color: #8f8f8f"><del>{{format2Number(scope.row.sum_platform,4)}}</del></span>
            <span v-if="scope.row.status!=1">{{format2Number(scope.row.sum_platform,4)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="supamount" v-if="columnHeaders[6].show" label="折后总额" align="center" width="90">
          <template v-slot="scope">
            <span v-if="scope.row.status==1"
              style="color: #8f8f8f"><del>{{format2Number(scope.row.sum_sup,4)}}</del></span>
            <span v-if="scope.row.status!=1">{{format2Number(scope.row.sum_sup,4)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货信息" v-if="columnHeaders[7].show" align="center">

          <el-table-column label="收货人" width="80px" align="center" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #8f8f8f"><del>{{scope.row.buyerinfo.buyer}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.buyerinfo.buyer}}</span>
            </template>
          </el-table-column>
          <el-table-column label="收货电话" width="100px" show-overflow-tooltip align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #8f8f8f"><del>{{scope.row.buyerinfo.mobile}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.buyerinfo.mobile}}</span>
            </template>
          </el-table-column>
          <el-table-column label="收货地址" width="160px" show-overflow-tooltip>
            <template slot="header">
              <div style="text-align: center;">收货地址</div>
            </template>
            <template v-slot="scope">
              <span v-if="scope.row.status==1" style="color: #8f8f8f"><del>{{scope.row.region_values.join(" ")}}
                  {{scope.row.buyerinfo.address}}</del></span>
              <span v-if="scope.row.status!=1">{{scope.row.region_values.join(" ")}}
                {{scope.row.buyerinfo.address}}</span>
            </template>
          </el-table-column>

          <el-table-column label="客户单位名称" prop="clientname" show-overflow-tooltip width="150px"></el-table-column>
        </el-table-column>
        <el-table-column label="实际客户" prop="client" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="saleman" v-if="columnHeaders[10].show" label="业务员" width="80px"
          align="center"></el-table-column>
        <el-table-column prop="ordermemo" label="备注" v-if="columnHeaders[18].show" show-overflow-tooltip></el-table-column>


        <el-table-column label="采购成本及发票" align="center">
          <el-table-column prop="sum_cost" label="总成本" align="center"></el-table-column>
          <el-table-column prop="cost_status" label="状态" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.cost_status==0" style="color: #FF0000;">不完整</span>
              <span v-if="scope.row.cost_status==1" style="color: #67C23A;">已完整</span>
            </template>
          </el-table-column>
          <el-table-column prop="deliver_status" label="合作商发票" width="90" align="center">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleSupTicket(scope.$index,scope.row)">
                <span v-if="scope.row.supticket_status==0" style="color:#E6A23C">待开</span>
                <span v-if="scope.row.supticket_status==1" style="color:#E6A23C">已开</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deliver_status"  label="渠道发票" width="90" align="center">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handlePlatformTicket(scope.$index,scope.row)">
                <span style="color:#F56C6C" v-if="scope.row.platformticket_status==0">待开</span>
                <el-popover v-if="scope.row.platformticket_status==1" trigger="hover" effect="light" placement="top">
                  <div>
                    销项票号:{{scope.row.platformticket_ids}}
                  </div>
                  <span slot="reference" style="color:#67C23A">已开</span>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deliver_status" label="客户发票" width="90" align="center">
            <template v-slot="scope">
              <div style="cursor: pointer;" >
                <span v-if="scope.row.supticket_status==0" style="color:#E6A23C">待开</span>
                <span v-if="scope.row.supticket_status==1" style="color:#E6A23C">已开</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="收付款情况" align="center">
          <el-table-column label="认款状态"  align="center">
                <template v-slot="scope">
                  <span v-if="scope.row.platformverify==0" style="color: #F56C6C;">未认款</span>
                  <span v-if="scope.row.platformverify==1" style="color: #55aa00;">已认款</span>
                </template>
            </el-table-column>
          <el-table-column label="渠道收款"  align="center">
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleInAmount(scope.$index,scope.row)">
                <span v-if="scope.row.income_rmb==0" style="color: #F56C6C;">未收款</span>
                <el-popover v-if="scope.row.income_rmb>0 && scope.row.income_rmb<scope.row.sum_platform" trigger="hover"
                  effect="light" placement="top">
                  <span>已收:{{scope.row.income_rmb}}</span>
                  <span slot="reference" style="color:#E6A23C">部分收款</span>
                </el-popover>
                <el-popover v-if="scope.row.income_rmb>0 && scope.row.income_rmb>=scope.row.sum_platform" trigger="hover"
                  effect="light" placement="top">
                  <span>已收:{{scope.row.income_rmb}}</span>
                  <span slot="reference" style="color: #67C23A;">已收款</span>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="合作商付款"  align="center" width="100px"show-overflow-tooltip>
            <template v-slot="scope">
              <div style="cursor: pointer;" @click="handleInAmount(scope.$index,scope.row)">
                  <span v-if="scope.row.paid_status==0" style="color:#F56C6C">未付款</span>
                   <span v-if="scope.row.paid_status==1" style="color:#67C23A" :title="'已付:'+scope.row.paid_rmb">已付款</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="业务提成" align="center" v-if="false">
          <el-table-column prop="saleman" v-if="columnHeaders[10].show" label="业务员" width="80px"
            align="center"></el-table-column>
          <el-table-column prop="commission_rmb" label="金额" width="95px" align="center">
            <template v-slot="scope">
              {{scope.row.commission_rmb}} <span v-if="scope.row.commission_memo!=''" style="margin-left:2px;"
                :title="'备注:'+scope.row.commission_memo"><i class="el-icon-info"
                  style="color: #ff5500; cursor: pointer;"></i></span>
            </template>
          </el-table-column>
          <el-table-column prop="commission_status" label="状态" width="80px" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.commission_status==0" style="color: #F56C6C;">未结算</span>
              <span v-if="scope.row.commission_status==1" style="color: #67C23A;">已结算</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="supname" label="合作商" v-if="columnHeaders[17].show" show-overflow-tooltip width="120px" align="center">
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="140" align="center" border>
          <template v-slot="scope">
            <el-button-group>
              <el-button type="infor" size="mini" circle icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index,scope.row)" title="修改订单"></el-button>
              <el-button size="mini" circle type="success" icon="el-icon-money" title="销售提成管理"
                @click="handleCommissionShow(scope.$index,scope.row)"></el-button>
              <el-button size="mini" circle type="infor" icon="el-icon-printer" title="打印订单"
                @click="handlePrewview(scope.$index,scope.row)"></el-button>
                <el-button size="mini" circle type="danger" icon="el-icon-delete" title="删除订单" @click="handleDeleteOrder(scope.$index,scope.row)"></el-button>
              <el-button size="mini" v-if="false" circle type="danger" icon="el-icon-delete" title="取消订单"
                @click="handleCancelOrder(scope.$index, scope.row);"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditUI ref="editUI" v-if="editVisible" @update="handleEditCompleteHandler"></EditUI>
    <GetAmountUI ref="getamountUI" v-if="inamountVisible" @getamountChangedHandler="handleGetAmountCompleteHandler"
      @paidamountChangeHandler="handlePaidAmountComplateHandler" @paidstatusChangeHandler="paidStatusChangedHandler">
    </GetAmountUI>
    <DeliverUI ref="deliverUI" v-if="deliverVisible" />
    <SupTicketUI ref="supticketUI" v-if="supticketVisible" @closeHandler="handletsupticket_verify"></SupTicketUI>
    <PlatformTicketIn ref="platformticketinUI" v-if="platformticketinVisible"
      @closeHandler="handlePlatformTicketinStatus"></PlatformTicketIn>

    <PrinterUI v-if="printVisible" ref="printerUI"></PrinterUI>
    <DispatchUI ref="dispatchUI" v-if="dispatchVisible" @closeHandler="handleDispatchCallback"></DispatchUI>

    <CancelOrderUI ref="cancelOrderUI" v-if="cancelVisible"></CancelOrderUI>

    <CreateUI ref="createUI" v-if="createVisible" @updated="curpage=1;loadDataList();"></CreateUI>
    <CommissionUI ref="commissionUI" v-if="commisionVisible" @updated="handleCommisionUpdateCallback"></CommissionUI>

    <div style="display: flex;">
      <div style="flex: 1; line-height: 45px;">
        <span style="margin-right: 30px;">订单总额:{{sum_order}}</span>
        <span style="margin-right: 30px;">应收总额:{{sum_platform}} </span>
        <span style="margin-right: 30px;">应付总额:{{sum_sup}} </span>
        <span style="margin-right:30px">提成总额:{{rmb4saletotal}}</span>
        <span style="margin-right:30px">选中总额:{{parseFloat(sumamount_selection).toFixed(4)}}</span>
        <span style="margin-right:30px">选中应付总额:{{parseFloat(sumsup_selection).toFixed(4)}}</span>
        <span style="margin-right:30px">选中总成本:{{parseFloat(sumcost_selection).toFixed(4)}}</span>
      </div>
      <div style="margin-top: 10px; text-align: right;">
        <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
          layout=" prev, pager, next,sizes,total" :page-sizes="[30, 60, 120,200]" :total="numrows" :page-size="pagesize"
          :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import EditUI from './edit.vue';
  import GetAmountUI from './GetAmountUI.vue'
  import DeliverUI from './DeliverUI.vue'
  import SupTicketUI from './SupTicketVerify.vue'
  import PlatformTicketIn from './PlatformTicketIn.vue';
  import DispatchUI from './DispathUI.vue'
  import PrinterUI from './Printer.vue'
  import SupticketVerifyUI from './SupTicketVerify.vue'
  import CancelOrderUI from './CancelOrder.vue';
  import qs from 'qs';
  import CommissionUI from './commission.vue';
  import CreateUI from './create.vue';

  export default {
    components: {
      CreateUI,
      EditUI,
      GetAmountUI,
      DeliverUI,
      SupTicketUI,
      PlatformTicketIn,
      DispatchUI,
      PrinterUI,
      CommissionUI,
      SupticketVerifyUI,
      CancelOrderUI
    },
    mounted() {
      if (localStorage.getItem(this.$route.name) == null) {
        localStorage.setItem(this.$route.name, JSON.stringify(this.columnSelected));
      } else {
        this.columnSelected = JSON.parse(localStorage.getItem(this.$route.name));
      }
      this.loadDataList();
      this.loadPlatforms();
      this.loadSuppliers();
      this.loadSalemans();
    },
    watch: {
      columnSelected(newArrayVal) {
        this.columnHeaders.filter(item => {
          if (newArrayVal.indexOf(item.title) != -1) {
            item.show = true;
          } else {
            item.show = false;
          }
        })
        this.$nextTick(() => {
          this.$refs.tableData.doLayout()
        })

        localStorage.setItem(this.$route.name, JSON.stringify(newArrayVal));
      }
    },
    data() {
      return {
        columnSelected: ["子订单号", "下单时间", "类型", "渠道", "订单总额", "应收总额", "折后总额", "收货人", "收货电话", "收货地址", "业务员", "状态", "发货",
          "进项", "销项", "收款", "付款", "供应商", "备注"
        ],
        columnHeaders: [{
            "title": "子订单号",
            "show": true
          },
          {
            "title": "下单时间",
            "show": true
          },
          {
            "title": "类型",
            "show": true
          },
          {
            "title": "渠道",
            "show": true
          },
          {
            "title": "订单总额",
            "show": true
          },
          {
            "title": "应收总额",
            "show": true
          },
          {
            "title": "折后总额",
            "show": true
          },
          {
            "title": "收货人",
            "show": true
          },
          {
            "title": "收货电话",
            "show": true
          },
          {
            "title": "收货地址",
            "show": true
          },
          {
            "title": "业务员",
            "show": true
          },
          {
            "title": "状态",
            "show": true
          },
          {
            "title": "发货",
            "show": true
          },
          {
            "title": "进项",
            "show": true
          },
          {
            "title": "销项",
            "show": true
          },
          {
            "title": "收款",
            "show": true
          },
          {
            "title": "付款",
            "show": true
          },
          {
            "title": "供应商",
            "show": true
          },
          {
            "title": "备注",
            "show": true
          }
        ],

        salelist: [],
        suppliers: [],
        JsonFields: {
          "ouid": 'ouid',
          "下单时间": {
            field: 'orderdate',
            callback: (value) => {
              return "'" + value;
            }
          },
          "区域": "region_values",
          "子订单号": {
            field: 'ordercode',
            callback: (value) => {
              return "'" + value;
            }
          },
          "下单渠道": "platform",
          "订单总额": "amount",
          "折扣总额": "ptamount",
          "京东编码": {
            field: 'good.sn',
            callback: (value) => {
              return "'" + value;
            }
          },
          "商品名称": "good.title",
          "单位": "good.unit",
          "数量": "good.count",
          "商城单价": "good.price",
          "订单小计": "good.total",
          "渠道单价": "good.ptprice",
          "渠道小计": "good.pttotal",
          "供应商单价": "good.supprice",
          "供应商总额": "good.suptotal",
          "订单备注": "ordermemo",
          "业务员": "saleman",
          "供应商": "supname",
          "客户名称": "clientuser",
          "收货人": "buyerinfo.buyer",
          "收货电话": "buyerinfo.mobile",
          "收货地址": "buyerinfo.address",
          "合作商发票": {
            field: 'supticket_status',
            callback: (value) => {
              return value == "0" ? "待开" : "已审核";
            }
          },
          "供应商进项票号": "supticket_ids",
          "平台发票销项": {
            field: 'platformticket_status',
            callback: (value) => {
              return value == "1" ? "已开票" : "未开票"
            }
          },
          "平台发票票号": "platformticket_ids",
          "收款状态": {
            field: 'income_status',
            callback: (value) => {
              return value == "1" ? "未收款" : (value == 3 ? "已收款" : "部分收款");
            }
          },
          "付款状态": {
            field: 'paidstatus',
            callback: (value) => {
              return value == "0" ? "未付款" : "已付款";
            }
          }
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        filterData: {
          ouid:'',
          daterange: '',
          type: '',
          mordercode: '',
          ordercode: '',
          supid: '',
          subordercode: '',
          sticket_status: '',
          buyerinfo: '',
          platform: '',
          good: '',
          ordermemo: '',
          incomes_status: '',
          paid_tatus: '',
          supticket_status: '',
          platformticketid: '',
          supticketid: '',
          commission_status: '',
          saleman: '',
          client:'',
          clientname:'',
          containcancel: true,
          cost_bindstatus: ''
        },
        platforms: [],
        //表格与分页相关
        tableData: [],
        curpage: 1,
        pagesize: 30,
        numrows: 1,
        sum_order: 0, //订单总额
        sum_platform: 0,
        sum_sup: 0,
        rmb4saletotal: 0,
        createVisible:false,
        editVisible: false,
        inamountVisible: false,
        deliverVisible: false,
        supticketVisible: false,
        platformticketinVisible: false,
        dispatchVisible: false,
        printVisible: false,
        commisionVisible: false,
        cancelVisible: false,
        selection: [],
        sumamount_selection: 0,
        sumsup_selection: 0,
        sumcost_selection: 0,
      }
    },
    methods: {
      handleNewOrder(){
          this.createVisible=true;
          this.$nextTick(()=>{
            this.$refs.createUI.dialogVisible=true;
            this.$refs.createUI.init();
          })
      },
      querySearchAsync(str, cb) {
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      loadSalemans() {
        this.axios.post("api/admin/mate/list_op").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.salelist = res.data.list;
          }
        })
      },
      handleCommissionShow(index, data) {
        this.commisionVisible = true;
        this.$nextTick(() => {
          this.$refs.commissionUI.dialogVisible = true;
          this.$refs.commissionUI.init(index, JSON.parse(JSON.stringify(data)));
        })
      },
      handleCommisionUpdateCallback(index, data) {
        this.tableData[index].commission_rmb = parseFloat(data.commission_rmb).toFixed(2);
        this.tableData[index].commission_status = data.commission_status;
        this.tableData[index].commission_memo = data.commission_memo;
      },
      loadSuppliers: function() {
        this.axios.post("api/admin/supplier/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.suppliers = res.data.list;
          }
        })
      },
      handleSelection(selection) {
        this.selection = selection;
        this.sumamount_selection = 0;
        this.sumsup_selection = 0;
        this.sumcost_selection = 0;
        this.selection.forEach((item) => {
          this.sumamount_selection += item.sum_order;
          this.sumsup_selection += item.sum_sup;
          this.sumcost_selection += item.sum_cost;
        })
      },
      loadPlatforms: function() {
        this.axios.post("/api/admin/platform/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.platforms = res.data.platforms;
          }
        })
      },
      handleQuery: function() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList: function() {
        let params = {
          daterange: this.filterData.daterange,
          curpage: this.curpage,
          pagesize: this.pagesize,
          ouid:this.filterData.ouid,
          ordercode: this.filterData.ordercode,
          buyerinfo: this.filterData.buyerinfo,
          sticket_status: this.filterData.sticket_status == "全部" ? "" : this.filterData.sticket_status,
          good: this.filterData.good,
          platform: this.filterData.platform == "全部" ? "" : this.filterData.platform,
          supid: this.filterData.supid,
          commission_status: this.filterData.commission_status,
          ordermemo: this.filterData.ordermemo,
          client:this.filterData.client,
          clientname:this.filterData.clientname,
          platformticketid: this.filterData.platformticketid,
          supticketid: this.filterData.supticketid,
          income_status: this.filterData.incomes_status == "全部" ? "" : this.filterData.incomes_status,
          paid_status: this.filterData.paid_tatus == "全部" ? "" : this.filterData.paid_tatus,
          supticket_status: this.filterData.supticket_status == "全部" ? "" : this.filterData.supticket_status,
          saleman: this.filterData.saleman,
          cost_bindstatus: this.filterData.cost_bindstatus,
          containcancel: this.filterData.containcancel ? 1 : 0
        }
        this.axios.post("/api/admin/order/list", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.curpage = res.data.curpage;
            this.pagesize = res.data.pagesize;
            this.numrows = res.data.numrows;
            this.tableData = res.data.list;
            this.sum_order = res.data.sum_order;
            this.sum_platform = res.data.sum_platform;
            this.sum_sup = res.data.sum_sup;

            this.$refs.tableData.doLayout();

            this.getExpendIds();
          } else {
            this.$message.error("获取订单列个失败!");
          }
        });
      },
      getExpendIds() {
        var els = document.getElementsByClassName("el-table__expand-icon");
        for (let i = 0; i < els.length; i++) {
          els[i].click();
        }
      },
      format2Number(value, len) {
        var f = parseFloat(value);
        var f = Math.round(value * 10000) / 10000;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + len) {
          s += '0';
        }
        return s;
      },
      /********编辑订单信息************/
      handleEdit: function(index, row) {
        console.log("编辑前",row);
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.init(index,this.platforms,this.suppliers,JSON.parse(JSON.stringify(row)))
          this.$refs.editUI.dialogVisible = true;
        })
      },
      handleEditCompleteHandler: function(index, form,sumorder,sumplatform,sumsup) {
        console.log(form,sumorder,sumplatform,sumsup);
        this.tableData[index].platformid = form.platformid;
        this.tableData[index].platform = form.platform;
        this.tableData[index].sum_order = form.sum_order;
        this.tableData[index].buyerinfo.buyer = form.buyer;
        this.tableData[index].buyerinfo.mobile = form.mobile;
        this.tableData[index].buyerinfo.address = form.address;
        this.tableData[index].region_ids = form.region_ids;
        this.tableData[index].region_values = form.region_values;
        this.tableData[index].client=form.client;
        this.tableData[index].clientname=form.clientname;
        this.tableData[index].ordermemo = form.ordermemo;
        this.tableData[index].goods = form.goods;
        this.tableData[index].supid = form.supid;
        this.tableData[index].supname = form.supname;
        this.tableData[index].suprate = form.suprate;
         this.tableData[index].platformrate = form.platformrate;
         this.tableData[index].saleman = form.saleman;
        this.tableData[index].orderdate = form.orderdate;
        this.tableData[index].ordercode = form.ordercode;
        this.tableData[index].sum_order = this.format2Number(sumorder, 4);
        this.tableData[index].sum_sup = this.format2Number(sumsup, 4);
        this.tableData[index].sum_platform = this.format2Number(sumplatform, 4);
        this.tableData[index].attach=form.attach;
      },
      handleInAmount: function(index, row) {
        this.inamountVisible = true;
        this.$nextTick(() => {
          this.$refs.getamountUI.dialogVisible = true;
          this.$refs.getamountUI.init(index, JSON.parse(JSON.stringify(row)))
        })
      },
      handleGetAmountCompleteHandler: function(index, sum, status) {
        //console.log(index, sum);
        this.tableData[index].income_rmb = sum;
        this.tableData[index].income_status=status;
      },
      handlePaidAmountComplateHandler: function(index, sum, status) {
        this.tableData[index].paidamount = sum;
        this.tableData[index].paidstatus = status;
      },
      paidStatusChangedHandler: function(index, status) {
        this.tableData[index].paid_status = status;
      },
      //查看快递信息
      handleDeliver(index, row) {
        this.deliverVisible = true;
        this.$nextTick(() => {
          this.$refs.deliverUI.dialogVisible = true;
          this.$refs.deliverUI.init(index, JSON.parse(JSON.stringify(row)))
        })
      },
      //查看进项申请
      handleSupTicket(index, row) {
        this.supticketVisible = true;
        this.$nextTick(() => {
          this.$refs.supticketUI.init(index, JSON.parse(JSON.stringify(row)))
          this.$refs.supticketUI.dialogVisible = true;
        })
      },
      //*****************平台销项票*******************//
      handlePlatformTicket(index, row) {
        this.platformticketinVisible = true;
        this.$nextTick(() => {
          this.$refs.platformticketinUI.dialogVisible = true;
          this.$refs.platformticketinUI.init(index, JSON.parse(JSON.stringify(row)))
        })
      },
      handleupdate_paidstatus(index, status) {
        this.tableData[index].paidstatus = status;
      },
      handlePlatformTicketinStatus(index, status, ticketinids, attach) {
        this.tableData[index].platformticket_status = status;
        this.tableData[index].platformticket_ids = ticketinids.join(",");
        this.tableData[index].platformticket_attach = attach;
      },
      handletsupticket_verify(index, detail) {
        this.tableData[index].supticket_status = detail.status;
        this.tableData[index].supticket_signedtime = detail.date;
        this.tableData[index].supticket_signedmemo = detail.memo;
        this.tableData[index].supticket_verifymsg = detail.msg;
        this.tableData[index].supticket_amount = detail.amount;
        this.tableData[index].supticket_same = detail.same;
        this.tableData[index].supticket_memo = detail.supticket_memo;
      },
      handleSupticketSigned(index, detail) {
        this.tableData[index].supticket_signedtime = detail.supticket_signedtime;
        this.tableData[index].supticket_signedmemo = detail.supticket_signedmemo;
        this.tableData[index].supticket_status = detail.supticket_status;
      },
      handleResetStatus(index) {
        this.tableData[index].supticket_status = 0;
        this.tableData[index].supticket_detail = [];
      },
      handleDeleteOrder(index,row){
       var that=this;
       this.$confirm("确定要删除"+row.ordercode+"订单吗？", "操作确认", {
         confirmButtonText: "确定删除",
         cancelButtonText: "取消",
         type: 'error'
       }).then(() => {
            this.axios.post("api/admin/order/remove",{ouid:row.ouid}).then(res=>{
                if(res.status==200 && res.data.code){
                  this.$message.success({
                    message: res.data.msg,
                    duration: 1500,
                    showClose: true
                  });
                }else{
                 this.$message.error({
                   message: res.data.msg,
                   duration: 1500,
                   showClose: true
                 });
                }
            });
            this.loadDataList();
       }).catch(()=>{});
      },
      /************派单********************/
      handleDispatch(index, row) {
        this.dispatchVisible = true;
        this.$nextTick(() => {
          this.$refs.dispatchUI.dialogVisible = true;
          this.$refs.dispatchUI.init(index, JSON.parse(JSON.stringify(row)))
        })
      },
      handleDispatchCallback(index, status) {
        this.tableData[index].status = status;
      },
      handlePrewview(index, row) {
        this.printVisible = true;
        this.$nextTick(() => {
          this.$refs.printerUI.dialogVisible = true;
          this.$refs.printerUI.init(row);
        })
      },
      handleCancelOrder(index, row) {
        this.cancelVisible = true;
        this.$nextTick(() => {
          this.$refs.cancelOrderUI.dialogVisible = true;
          this.$refs.cancelOrderUI.init(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleExport() {
        let params = {
          daterange: this.filterData.daterange,
          curpage: this.curpage,
          pagesize: this.pagesize,
          ordercode: this.filterData.ordercode,
          buyerinfo: this.filterData.buyerinfo,
          good: this.filterData.good,
          platform: this.filterData.platform,
          supname: this.filterData.supname,
          income_status: this.filterData.incomes_status == "全部" ? "" : this.filterData.incomes_status,
          paid_status: this.filterData.paid_tatus == "全部" ? "" : this.filterData.paid_tatus,
          supticket_status: this.filterData.supticket_status == "全部" ? "" : this.filterData.supticket_status,
          platformticketid: this.filterData.platformticketid,
          supticketid: this.filterData.supticketid,
          cost_bindstatus: this.filterData.cost_bindstatus,
          token: localStorage.getItem("token") == null ? "" : localStorage.getItem("token"),
          saleman: this.filterData.saleman
        }
        window.open(this.axios.default.baseURL + "/admin/jd/order/export?" + qs.stringify(params));
      }
    }
  }
</script>

<style scoped>
  .table-fixed {
    ::v-deep .el-table__fixed-right {
      height: 100vh !important;
    }

    ::v-deep .el-table__fixed {
      height: 100% !important;
    }

  }

  .table-wraper {
    height: calc(100vh - 330px);
  }
</style>
